<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>{$data_one.title|htmlspecialchars}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" href="__ASSERTS__/css/reset.css?{$Think.const.STATIC_RES_HASH}" />
    <link rel="stylesheet" href="__ASSERTS__/mdeditor/css/editormd.preview.css?{$Think.const.STATIC_RES_HASH}" />
    <script src="__ASSERTS__/js/jquery-1.11.3.js?{$Think.const.STATIC_RES_HASH}"></script>
    <style type="text/css">
        body {
            margin:0;
            padding:0;
            font-family: 'Helvetica Neue',Arial,'Hiragino Sans GB',STHeiti,'Microsoft YaHei','WenQuanYi Micro Hei',SimSun,Song,sans-serif;
            background: #F6F6F6;
        }
        .body-container{
            max-width:800px;
            margin:0 auto;
            padding:0;
            border:1px solid #CCC;
            width:100%;
            overflow: hidden;
            box-sizing: border-box;
        }
        #markdown_sidebar {
            padding: 0;
            border: 1px solid #ddd;
            border-left:none;
            border-right:none;
            background:#F6F6F6;
        }
        #markdown_sidebar:hover {
            overflow: auto;
        }
        #markdown_sidebar > .markdown-body{
            background:none;
            width:100%;
            padding:20px 0;
        }
        #markdown_sidebar h1 {
            margin:0;
            padding:0;
            font-size: 1.5em;
            text-align: center;
            font-weight: bold;
            color:#999;
            border-bottom:1px dashed #CCC;
            line-height:40px;
        }
        #custom_toc_container {
            padding-left: 0;
        }
        #markdown_title{
            padding:20px 0;
            font-size:1.8em;
            margin:0;
            width:auto;
            text-align: center;
            color:#2c3f51;
            border-bottom:1px solid #CCC;
            font-weight:bold;
            max-width:900px;
            background: #FFF;
            border-right:1px solid #EEE;
        }
        #markdown_view {
            margin: 0;
            width:auto;
            background: #FFF;
            border-right:1px solid #EEE;
            padding:10px;
        }
        #qrcode{
            position:fixed;
            right:40px;
            top:40px;
            border:1px solid #CCC;
            padding:10px;
            background: #FFF;
            display: none;
        }
    </style>
</head>
<body>


<div class="body-container">
    <div id="qrcode"></div>
    <div id="markdown_title">
        {$data_one.title|htmlspecialchars}
    </div>
    <div id="markdown_sidebar">
        <h1>目录</h1>
        <div class="markdown-body editormd-preview-container" id="custom_toc_container"></div>
    </div>
    <div id="markdown_view">
        <textarea style="display:none;">{$data_one.content|htmlspecialchars}</textarea>
    </div>
</div>
<script src="__ASSERTS__/mdeditor/lib/marked.min.js?{$Think.const.STATIC_RES_HASH}"></script>
<script src="__ASSERTS__/mdeditor/lib/prettify.min.js?{$Think.const.STATIC_RES_HASH}"></script>
<script src="__ASSERTS__/mdeditor/lib/raphael.min.js?{$Think.const.STATIC_RES_HASH}"></script>
<script src="__ASSERTS__/mdeditor/lib/underscore.min.js?{$Think.const.STATIC_RES_HASH}"></script>
<script src="__ASSERTS__/mdeditor/lib/sequence-diagram.min.js?{$Think.const.STATIC_RES_HASH}"></script>
<script src="__ASSERTS__/mdeditor/lib/flowchart.min.js?{$Think.const.STATIC_RES_HASH}"></script>
<script src="__ASSERTS__/mdeditor/lib/jquery.flowchart.min.js?{$Think.const.STATIC_RES_HASH}"></script>
<script src="__ASSERTS__/mdeditor/lib/marked.min.js?{$Think.const.STATIC_RES_HASH}"></script>
<script src="__ASSERTS__/mdeditor/editormd.js?{$Think.const.STATIC_RES_HASH}"></script>
<script src="__ASSERTS__/js/jquery.qrcode.js?{$Think.const.STATIC_RES_HASH}"></script>
<script type="text/javascript">
    $(function () {
        if($(window).width()>800) {
            $('#qrcode').qrcode({
                "size": 120,
                "color": "#3a3",
                "text": "http://{$Think.const.HTTP_HOST}__ROOT__<?php if(C('URL_MODEL')!=2){echo '?s=';} ?>/r/{$data_one.out_id}:mobile"
            }).fadeIn();
        }
        editormd.markdownToHTML("markdown_view", {
            htmlDecode : "style,script,iframe|on*",
            tocContainer: "#custom_toc_container",
            markdownSourceCode: false,
            emoji: false,
            taskList: true,
            tex: true,
            flowChart: true,
            sequenceDiagram: true,
            onload: function(div){
                div.find('.sequence-diagram > svg, .flowchart > svg').each(function(i,o){
                    try{
                        var width = $(o).attr('width'),
                                height = $(o).attr('height');
                        //$(o).attr('viewBox','0 0 '+height+' '+width);
                        o.setAttribute('viewBox','0 0 '+width+' '+height);
                    }catch(e){}
                });
            }
        });
    });
</script>
</body>
</html>